<template>
   <div>
     <MyHead :title="itemlist.name"></MyHead>
        <van-swipe 
            class="my-swipe" 
            :autoplay="2000" 
            indicator-color="#ff5687"
        >
            <van-swipe-item v-for="(l,i) in itemlist.img" :key="i">
                <img :src="l" class="g-img" alt="">
                
            </van-swipe-item>
        </van-swipe>
       <div class="gotoapp">
         <p>APP内打开,查看高清图片</p>
       </div>
       <h6 class="price">¥<span>{{itemlist.price}}</span></h6>
       <div class="btdz">
        <div class="left"><h3 class="title">{{itemlist.name}}</h3></div>
        <div class="right"><van-icon :size='84' name="like-o" /><p v-if="itemlist.itemsLikeVO.count">{{itemlist.itemsLikeVO.count}}人想要</p></div>
       </div>
       <div class="details">
        <ul>
            <li class="cs">参数</li>
            <li v-for="(l,i) in itemlist.attrList.slice(0,4)" :key="i">
                <p>{{l.attrName}}</p>
                <span>{{l.attrValue}}</span>
            </li>
        </ul>
       </div>
       <van-goods-action>
            <van-goods-action-icon icon="chat-o" text="评论" color="#fb7ea2" />
            <van-goods-action-icon icon="cart-o" @click="gotocart" text="购物车" :badge="myCarts.length" color="#fb7ea2" />
            <van-goods-action-icon icon="star" @click="todoCollect" :badge="collectCount" :text="hasCollect?'已收藏':'收藏'" :color="hasCollect?'#fb7ea2':'#666'" />
            <van-goods-action-icon icon="like-o" @click="todoLike" :badge="liekCount" :text="hasLike?'已点赞':'点赞'" :color="hasLike?'#fb7ea2':'#999'"/>
            <van-goods-action-button type="warning" @click="addGoodToCart" text="加入购物车" color="#fb7ea2" />
            <van-goods-action-button type="danger" text="立即购买" @click="gotopay" color="#ec527b" />
        </van-goods-action>
   </div>

</template>

<script>
export default {
    data(){
        return{
            item:'',
            itemsId:'',
            itemlist:'',
            good:null,
            value:1, //购买数量
            hasLike:false,
            liekCount:0,  //商品点赞次数
            hasCollect:false,
            collectCount:0, //商品收藏次数
            // slice:Function,
            // count:String
        }
    },
        computed:{
        total(){
            return (this.value*this.itemlist.price)
        }
    },
    methods:{
        async getbzItem() {
            let res = await this.$ajax.getItem({
                feedType: 0
            });
            this.item = res.data.vo.list;
        },
        async getbzXq() {
                    let res = await this.$ajax.getXq({
                        itemsId:this.$route.params.itemsId
                    });
                    this.itemlist = res.data;
                    console.log(res);
                },
                //////
        async getGoodData(){
            let res = await this.$ajax.getGoods({
                itemsId:this.$route.params.itemsId
            })
            this.good = res.data
        },
        checkIsLogin(callback){
            if(this.userInfo){
                callback()
            }else{
                this.$dialog.confirm({
                    title: '友情提示',
                    message: '你还没有登录,请先登录哦',
                })
                .then(() => {
                    // on confirm
                    this.$router.push({name:'login'})
                })
                .catch(() => {
                    // on cancel
                });
            }
        },
        // 加入购物车
        addGoodToCart(){
            this.checkIsLogin(async ()=>{
                // 买过这个商品就数量累加
                // 没有买过  就直接添加 
                // 查询你有没有买过   
                // 谁买的 phone
                // 买的商品 itemsId 
                // 商品数据 good
                // 购买数量 value 
                let res = await this.$ajax.getCarts({
                    phone:this.userInfo.phone,
                    itemsId:this.$route.params.itemsId
                })
                if(res.length>0){
                    // 买过这个商品就数量累加
                    let res2 = await this.$ajax.updateCarts(res[0].id ,{
                        value:res[0].value + this.value 
                    })
                    this.$toast("购物车添加成功")
                    this.getMyCarts({phone:this.userInfo.phone})
                }else{
                    //  没有买过  就直接添加 
                    let res1 = await this.$ajax.addToCarts({
                        value:this.value,
                        phone:this.userInfo.phone,
                        itemsId:this.$route.params.itemsId,
                        good:this.good 
                    })
                    this.$toast("购物车新增成功")
                    this.getMyCarts({phone:this.userInfo.phone})
                }
            })
        },
        async getGoodData(){
            let res = await this.$ajax.getGoods({
                itemsId:this.$route.params.itemsId
            })
            console.log(res);
            this.good = res.data
            console.log( this.good);
        },
        checkIsLogin(callback){
            if(this.userInfo){
                callback()
            }else{
                this.$dialog.confirm({
                    title: '友情提示',
                    message: '你还没有登录,请先登录哦',
                })
                .then(() => {
                    // on confirm
                    this.$router.push({name:'login'})
                })
                .catch(() => {
                    // on cancel
                });
            }
        },
        gotocart(){
            this.checkIsLogin(()=>{
                this.$router.push({name:'cart'})
            })
        },
        gotopay(){
            this.checkIsLogin(()=>{
                this.$router.push({name:'pay',query:{total:this.total} })
            })
        },
        // 点赞否
        async checkHasLike(){
            let res = await this.$ajax.getLikes({
                phone:this.userInfo.phone,
                itemsId:this.$route.params.itemsId,
            }) 
            this.hasLike =  !!res.length;  // 强制类型转化 
        },
        // 收藏否
        async cheHasCollect(){
            let res = await this.$ajax.getCollects({
                phone:this.userInfo.phone,
                itemsId:this.$route.params.itemsId,
            }) 
            this.hasCollect =  !!res.length;  // 强制类型转化 
        },
        // 这个商品被点赞的次数
        async getLikeCount(){
            let res = await this.$ajax.getLikes({
                itemsId:this.$route.params.itemsId,
            }) 
            this.liekCount = res.length;
        },
         // 这个商品被收藏的次数
         async getCollectCount(){
            let res = await this.$ajax.getCollects({
                itemsId:this.$route.params.itemsId,
            }) 
            this.collectCount = res.length;
        },
         // 开始点赞
         todoLike(){
            this.checkIsLogin(async ()=>{
                let res = await this.$ajax.getLikes({
                    phone:this.userInfo.phone,
                    itemsId:this.$route.params.itemsId,
                }) 
                if(res.length>0){
                    // 已点赞  删除点赞 
                    let res2 = await this.$ajax.deleteLikes(res[0].id)
                    this.$toast("你取消了点赞")
                    this.hasLike = false;
                    this.liekCount--;
                }else{
                    // 未点赞  就要点赞
                    let res1 = await this.$ajax.addToLikes({
                        phone:this.userInfo.phone,
                        itemsId:this.$route.params.itemsId,
                        good:this.good, 
                    })
                    this.$toast({
                    message: '点赞成功啦',
                    icon: 'like-o',
                    });
                    this.hasLike = true;
                    this.liekCount++;
                }
            })
        },
         // 开始收藏
         todoCollect(){
            this.checkIsLogin(async ()=>{
                let res = await this.$ajax.getCollects({
                    phone:this.userInfo.phone,
                    itemsId:this.$route.params.itemsId,
                }) 
                if(res.length>0){
                    // 已点赞  删除收藏
                    let res2 = await this.$ajax.deleteCollects(res[0].id)
                    this.$toast("你取消了收藏")
                    this.hasCollect = false;
                    this.collectCount--;
                }else{
                    // 未收藏  就要收藏
                    let res1 = await this.$ajax.addToCollects({
                        phone:this.userInfo.phone,
                        itemsId:this.$route.params.itemsId,
                        good:this.good, 
                    })
                    this.$toast({
                    message: '收藏成功啦',
                    icon: 'star',
                    });
                    this.hasCollect = true;
                    this.collectCount++;
                }
            })
        },      
                
            },
    mounted(){
        this.getGoodData(),
        this.getbzXq()
        //  this.$route.params.itemsId = this.$route.params.itemsId 
        // this.addGoodToCart()
        this.getGoodData()
        this.getLikeCount()
        this.getCollectCount()
        if(this.userInfo){
            this.checkHasLike()
            this.cheHasCollect()
        }
    }
}
</script>




<style lang="scss" scoped>
.my-swipe{
    width: 374px;
   
}
.g-img{
    width: 374px;
    height: 374px;
}
.gotoapp{
    text-align: center;
    margin: 35px auto;
    line-height: 30px;
    font-size: 18px;
    height:30px;
    width: 80%;
    border:1px solid #e9538b;
    color: #e9538b;
    border-radius: 15px;
}
.price{
     color: #e9538b;
     font-size: 18px;
     padding-left: 26px;
     span{
        font-size: 28px;
        color: #e9538b;
        padding-left: 2px;
     }
}
.title{
    width: 300px;
    font-weight: 600;
    font-size: 16px;
    color: #212121;
    padding: 10px 2px 8px 26px ;
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
}
.btdz{
    display: flex;
    align-items: center;
    // border-bottom: 1px solid #e9538b;
}
.right{
 display: flex;
 flex-direction: column;
 align-items: center;
}
.details{
    width: 100%;
    ul{
        margin: 14px 2px;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        border-radius: 15px;
        border:1px solid #e9538b;
        .cs{
            color: #e9538b;
        }
        li{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin: 3px 3px;
            p{
                font-size: 12px;
                color: #999;
                padding-top: 4px;
            }
            span{
                font-size: 12px;
                color: #212121;
                padding: 4px 0px;
            }
        }
    }
}
</style>